<template>
  <div class="zy-content mb50">
    <back-level :go-page="close"></back-level>
    <Card class="detail-content-layout" :title="$t('preliminary.BasicInformation')">
      <div class="scrap-basic-info">
<!--        <div class="basic-info-title">-->
<!--          &lt;!&ndash;                <span></span>&ndash;&gt;-->
<!--          <h2>{{ $t('preliminary.BasicInformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipCheck.SerialNo') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.deviceMId }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('maintenance.EquipmentNo') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.deviceNo }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('maintenance.EquipmentType') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.categoryName }}</Col>
              </Row>
            </Col>
          </Row>
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('maintenance.EquipmentName') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.deviceName }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipCheck.Model') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.specification }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('preliminary.EquipmentSource') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ sourceList[info.sbly] }}</Col>
              </Row>
            </Col>
          </Row>
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.Location') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.position6 }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.UsedDept') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.useDept }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">
                  {{ $t('equipmentscrapped.DepartmentalCostCenter') }}
                </Col>
                <Col class="basic-info-body-item" span="24">{{ info.deptCostCenter }}</Col>
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <Card class="detail-content-layout mt16" :title="$t('preliminary.AssetInformation')">
      <div class="scrap-basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{ $t('preliminary.AssetInformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('preliminary.Vendor') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.supplier }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('preliminary.Manufacturer') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.manufacturer }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.AssetNo') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.assetsNo }}</Col>
              </Row>
            </Col>
          </Row>
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('common.AssetClassfication') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.assetCategory }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('ledger.OriginalValue') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.assetsOriginal }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.ResidualValue') }}
                </Col>
                <Col class="basic-info-body-item" span="24">{{ info.assets }}</Col>
              </Row>
            </Col>
          </Row>
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('ledger.DepreciationLife') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.depreciation }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.ActualUsedLife') }}
                </Col>
                <Col class="basic-info-body-item" span="24">{{ info.useTime }}</Col>
              </Row>
            </Col>
            <!-- <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24"></Col>
                <Col class="basic-info-body-item" span="24"></Col>
              </Row>
            </Col> -->
          </Row>
        </div>
      </div>
    </Card>
    <Card class="detail-content-layout mt16" :title="$t('common.Applicationinformation')">
      <div class="scrap-basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{ $t('common.Applicationinformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row >
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.Scrap') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.normalScrap == 1 ? '是' : '否' }}</Col>
              </Row>
            </Col>
            <Col span="8" >
              <Row>
                <Col class="basic-info-body-label" span="24">{{ $t('equipmentscrapped.Reason') }}</Col>
                <Col class="basic-info-body-item" span="24">{{ info.scrapReason }}</Col>
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <Card class="detail-content-layout mt16" :title="$t('ledger.attachmentinformation')">
      <div class="scrap-basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{ $t('ledger.attachmentinformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body" v-if="Array.isArray(info.attachmentVOS)" style="margin: 20px;">
        <span v-for="(item,index) in info.attachmentVOS" :key="index">
          <Tag color="blue" type="border" @click.native="handlePreview(item)">
              {{ item.fileName }}
          </Tag>
        </span>
        </div>
      </div>
    </Card>
    <Card class="detail-content-layout mt16" :title="$t('common.ApprovalInformation')">
      <div class="scrap-basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{ $t('common.ApprovalInformation') }}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <div class="approvalVosHeader">
            <span>{{ $t('审批节点') }}</span>
            <span>{{ $t('spareParts.ApprovedBy') }}</span>

<!--            <span>{{ $t('equipmentscrapped.Role') }}</span>-->
            <span>{{ $t('equipmentscrapped.Result') }}</span>
            <span>{{ $t('equipmentscrapped.Comments') }}</span>
            <span>{{ $t('equipmentscrapped.ApprovedTime') }}</span>
          </div>
          <Timeline v-if="Array.isArray(approvalVos)">
            <Timeline-item :color="item.color" v-for="(item,index) in approvalVos" :key="index">
              <div class="item-text">{{ item.processNodeName || '--' }}</div>
              <div class="item-text">{{ item.approvalByName || '--' }}</div>
<!--              <div class="item-text">{{ item.approvalRole || '&#45;&#45;' }}</div>-->
              <div class="item-text">{{ item.approvalResult || '--' }}</div>
              <div class="item-text">{{ item.scrapApprovalMessage || '--' }}</div>
              <div class="item-text">{{ item.approvalTime || '--' }}</div>
            </Timeline-item>
          </Timeline>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>

export default {
    name: "ledgerDetailModal",
    data() {
        return {
            info: {},
            sourceList: {
                1: '自制',
                6: '内购',
                2: '外购',
                4: '租赁',
                5: '客供',
            },
            approvalVos: []
        }
    },
    created() {
        this.getInfo()
    },
    mounted() {
    },
    methods: {
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath))
            }
        },
        getInfo() {
            this.axios({
                method: 'get',
                url: '/dms/scrapApply/info',
                params: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.code === 200) {
                    this.info = res.data
                    const approvalVos = (res.data || {}).approvalVos || [];
                    if (Array.isArray(approvalVos)) {
                        let index = 0
                        for (let i = 0; i < approvalVos.length; i++) {

                            if (approvalVos[i]['approvalTime']) {
                                approvalVos[i].color = 'green'
                            } else {
                                if (index === 0)
                                    approvalVos[i].color = 'blue'
                                else
                                    approvalVos[i].color = 'gray'
                                index++
                            }
                        }
                        this.approvalVos = approvalVos
                    }

                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        close() {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="scss">
.scrap-basic-info {
    ::v-deep .ivu-row {
        display: flex;
        align-items: center;
    }

    .basic-info-title {
        span {
            display: inline-block;
            width: 3px;
            height: 16px;
            background: #187bdb;
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 3px;
                height: 16px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        margin: 10px;
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;

        .basic-info-body-label {
            display: inline-block;
            //width: 40%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            border-left: 1px solid #eee;
            border-bottom: 1px solid #eee;
            text-align: left;
            padding: 0 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            display: inline-block;
            //width: 60%;
            height: 48px;
            line-height: 48px;
            text-align: left;
            padding: 0 10px;
            border-left: 1px solid #eee;
            border-bottom: 1px solid #eee;
            // border-right: 1px solid #eee;
            /*border-right: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }
    }
}

.approvalVosHeader {
    margin-bottom: 20px;
    padding-left: 24px;
    background: #f5f6f7;

    span {
        display: inline-block;
        width: 20%;

        line-height: 40px;
        text-align: center;
    }
}

.item-text {
    display: inline-block;
    width: 20%;
    text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.over-wrapper {
    max-width: 200px;
    /*height: 23px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
